<template>
  <div class="list-container">
    <div class="filter-container">
      <el-input v-model="listQuery.name" size="small" placeholder="输入指标名称" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" size="small" type="defalut" icon="el-icon-close" @click="clearParam" plain>清空</el-button>
    </div>
    <div class="btngroup">
      <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="handleCreateTask">新增</el-button>
      <el-button class="filter-item" size="mini" icon="el-icon-edit" @click="handleUpdateTask" 
        :disabled="multipleSelection.length !== 1">修改</el-button>
      <el-button class="filter-item" size="mini" icon="el-icon-delete" @click="handleDelTask"
        :disabled="multipleSelection.length == 0">删除</el-button>
    </div>
    <div class="task-items">
      <el-table :data="markList" size="small"  stripe style="width: 100%;text-align: center;" v-loading="listLoading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="指标名称" min-width="200" align="left"></el-table-column>
        <el-table-column label="创建日期" min-width="120">
          <template slot-scope="{row}">
            <span>{{ parseTime(row.create_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120">
          <template slot-scope="scope">
            <router-link :to="'/index-manager/checkIndex/'+scope.row.id">
              <el-button type="text" size="small">查看</el-button>
            </router-link>
            <router-link :to="'/index-manager/edit/'+scope.row.id">
              <el-button type="text" size="small">修改</el-button>
            </router-link>
            <el-button type="text" size="small" @click="tagTaskDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination class="pageWrapper" 
            v-show="total>0" 
            :total="total" 
            :layout="'total, prev, pager, next'" 
            :page.sync="listQuery.page" 
            :limit.sync="listQuery.size" 
            @pagination="handlePage" />
    </div>
  </div>
</template>
<script>
  import { getIndexList , updateTaskPart, deleteTarget } from '@/api/work.js'
  import {
    mapGetters
  } from 'vuex'
  import { filterObj, parseTime } from '@/utils/index.js'
  export default {
    name: 'IndexCenter',
    components: {
      'Pagination': require('@/components/Pagination').default,
    },
    watch: {
      previewObj(val){
        this.previewObj = val
      }
    },
    data() {
      return {
        tableList:[{
            title:'(新任务)文山学院关于配合文山市创建全国文明城市工作任务分',
            last_time:'2020/3/14 下午5:04:00',
            amount: 45
        }],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          size: 10,
          name: ''
        },
        dialogFormVisible:false,
        multipleSelection: [],
        markList: [],
        previewObj:{}
      }
    },
    computed:{
      ...mapGetters([
        'id'
      ]),
      isPub(){
        return this.multipleSelection.every(e => e.is_publish)
      }
    },
    mounted() {
      this.requestMarkList()
    },
    methods: {
      parseTime,
      // 清空搜索
      clearParam(){
        this.listQuery.name = ''
      },
      handleFilter(){
        this.listQuery.page= 1
        this.requestMarkList()
      },
      // 分页搜索
      handlePage(val) {
        this.listQuery.page=val.page
        this.requestMarkList()
      },
      tagTaskDel(id){
        this.$confirm('此操作将删除指标, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.postTaskDel(id)
          
        })
      },
      // 新增任务
      handleCreateTask(){
        this.$router.push({name:'CreateIndex'})
      },
      handleUpdateTask(){
        const index = this.multipleSelection[0].id
        this.$router.push({path: `/index-manager/edit/${index}`})
      },
      // 删除指标
      handleDelTask(){
        this.$confirm('此操作将删除指标, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.multipleSelection.forEach(item=>{
            this.postTaskDel(item.id)
          })
          this.requestMarkList()
        })
      },
      nextStep() {
        if (this.index++ > 1) this.active = 0;
      },
      preStep() {
        if (this.index-- < 0) this.active = 1;
      },
      handlePreview(row){
        this.dialogFormVisible = true
        this.previewObj = row
      },
      // 表格多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 提交删除任务
      postTaskDel(id){
        deleteTarget(id).then(res=>{
           this.$message({
              message: '删除指标成功！',
              type: 'success'
            });
            this.requestMarkList()
          })
      },
      // 提交修改任务发布状态
      postTaskPublish(id){
         updateTaskPart(id,{ is_publish: 'True'}).then(res=>{
           this.$message({
              message: '发布任务成功！',
              type: 'success'
            });
          })
      },
      requestMarkList() {
        this.listQuery.owner = this.id
        const param = filterObj(this.listQuery)
        getIndexList(param).then(res => {
          this.markList = res.data.results
          this.total = res.data.count
          this.listLoading = false
        })
      }
    },
  }

</script>
<style lang="scss">
  .list-container {
    padding: 20px;
    .btngroup{
      margin-top: 16px;
    }
    .task-items {
      margin-top: 20px;
    }
    
  }

</style>
<style>
/* .demo-table-expand {
     font-size: 0; 
     display: flex;
    flex-wrap: wrap;
    padding: 10px 57px 0;
  }
  .demo-table-expand label {
    width: 70px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
  }
  .el-table td, .el-table th{
    padding: 10px 0;
    text-align: center!important;
  }
  .el-table__expanded-cell{
    padding:0!important;
  }
  .el-button+.el-button {
    margin-left: 0;
  } */
</style>
